<template>
  <div :class="{ jobSearchSideContainer: true, canScroll: canScroll }">
    <!-- 组件里面是没有背景颜色的，背景颜色在jobSearchSideItem类名中 -->
    <!-- <salaryPK class="jobSearchSideItem salaryPk" /> -->
    <!-- <careerTools class="jobSearchSideItem careerTools" /> -->
    <careerPathTools class="jobSearchSideItem careerTools" />
    <hotRecruitment
      class="jobSearchSideItem hotRecruitment"
      :showMoreButton="showMoreButton"
    />
  </div>
</template>

<script>
import careerPathTools from '../hotJob/components/careerPathTools.vue';
// import salaryPK from "../hotJob/components/salaryPK.vue";
// import careerTools from "./components/careerTools.vue";
import hotRecruitment from './components/hotRecruitment.vue';
export default {
  components: {
    // salaryPK,
    careerPathTools,
    hotRecruitment
  },
  name: 'jobSearchSide',
  props: {
    showMoreButton: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    canScroll() {
      return this.$store.state.settings.canScroll;
    },
    data() {
      return {};
    }
  }
};
</script>

<style lang="scss" scoped>
.jobSearchSideContainer {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 150px);
  overflow-y: hidden;
  min-width: 231px;
  max-width: 231px;
  z-index: 1;
  &.canScroll {
    overflow-y: scroll;
  }
  .jobSearchSideItem {
    // position: sticky;
    // height: 254px;
    border-radius: 18px;
    padding: 18px 14px 14px 14px;
    background-image: linear-gradient(160deg, #d8ffef(0px), #FFFFFF(100px));
    // margin-bottom: 12px;
  }
}

::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar-thumb {
  display: none;
}
</style>
